<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Login to Oauth Services">
    <meta name="author" content="Rex Ijiekhuamen <dev.rexijie@gmail.com>">
    <title>CONFIRM ACCESS</title>
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" href="/css/confirmaccess.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Slabo+27px&display=swap"
          rel="stylesheet">
    <link rel="icon" href="/img/favicon.ico" type="image/png">
</head>
<body>
<div class="form-container">
    <form id="confirmationForm" class="form" name="confirmationForm" th:action="@{/oauth2/authorize}"
          method="post">
        <h1 class="form-header">Approve Access</h1>
        <div class="form-row">
            <p class="approval-text"><strong th:text="${client_name}"></strong> needs permission to access your
                information</p>
        </div>
        <input name="user_oauth_approval" value="true" type="hidden">
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

        <div class="form-row-linear" th:each="scope : ${scopes}">
            <div class="icon">
                <img th:src="@{'/img/' + ${scope} + '.svg'}" alt="read">
            </div>
            <div class="content">
                <strong class="title" th:text="${scope}"> READ </strong>
                <p class="description">permission to read your data</p>
                <label class="form-label">Approve:
                    <input type="radio" th:name="'scope.' + ${scope}" value="true">
                </label>
                <label class="form-label">Deny:
                    <input type="radio" th:name="'scope.' + ${scope}" value="false" checked>
                </label>
            </div>
        </div>

        <div class="form-footer d-flex-row f-justify-end">
            <button id="approve-button" class="button btn-primary mr10" type="submit" name="authorize">Allow</button>
            <button id="deny-button" class="button btn-secondary" type="submit" name="authorize">deny</button>
        </div>
    </form>
    <script>
        let form = document.getElementById('confirmationForm');
        let allowButton = document.getElementById('approve-button');
        let denyButton = document.getElementById('deny-button');
        let inputs = document.getElementsByTagName('input');
        let radioLength = inputs.length
        let acceptInputs = [];
        let rejectInputs = [];

        document.addEventListener('DOMContentLoaded', () => {
            populateRadios()
        });

        allowButton.addEventListener('click', (event) => {
            event.preventDefault()
            setChecked(acceptInputs)
            form.submit()
        })

        denyButton.addEventListener('click', (event) => {
            event.preventDefault()
            setChecked(rejectInputs)
            form.submit()
        })

        function populateRadios() {
            for ( let i = 0; i < radioLength; i++ ) {
                let input = inputs[ i ]
                if ( input.type === 'radio' ) {
                    if ( input.value === 'true' ) acceptInputs.push(input)
                    if ( input.value === 'false' ) rejectInputs.push(input)
                }
            }
        }

        function setChecked(radioButtons) {
            for ( let i = 0; i < radioButtons.length; i++ ) {
                let radio = radioButtons[ i ];
                radio.checked = true;
            }
        }
    </script>
</div>
</body>
</html>
